﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <link href="styles/photoswipe.css" rel="stylesheet" />
    <link href="Content/jquery.mobile.theme-1.2.0.min.css" rel="stylesheet" />
    <link href="Content/jquery.mobile-1.2.0.min.css" rel="stylesheet" />
    <link href="styles/jquery-mobile.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div data-role="page" id="Home">

        <div data-role="header">
            <h1>Fotos y recuerdos</h1>
            <div data-role="navbar">
                <ul>
                    <li><a href="login.php" data-icon="home">Deconnecter</a></li>

                    <li><a href="profil.html">Bienvenue</a></li>
                </ul>
            </div>
            <!-- /navbar -->
        </div>


        <div data-role="content">

            <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
                <div data-role="collapsible" data-theme="a">
                    <h2>Mes Albums</h2>
                    <ul data-role="listview" data-inset="true">
                        <li><a href="#Gallery1">1 Gallery<span class="ui-li-count">12</span></a></li>
                        <li><a href="#Gallery2">2 Gallery<span class="ui-li-count">5</span></a></li>
                        <li><a href="carousel.html">3 Carousel Gallery<span class="ui-li-count">5</span></a></li>
                    </ul>
                </div>
                <div data-role="collapsible" data-theme="a">

                    <h2>Mes contacts</h2>
                    <ul data-role="listview" data-filter="true" data-inset="true">
                        <li data-role="list-divider">A</li>
                        <li><a href="index.html">Alexandre Travez</a></li>
                        <li><a href="index.html">Alex marc</a></li>
                        <li><a href="index.html">Arnaud dupois</a></li>
                        <li data-role="list-divider">B</li>
                        <li><a href="index.html">Bastien Hirs</a></li>
                        <li data-role="list-divider">C</li>
                        <li><a href="index.html">Carla Mala</a></li>
                        <li><a href="index.html">Charle</a></li>
                    </ul>
                </div>
            </div>

            <ul data-role="listview" data-theme="a" data-inset="true">
                <li><a href="uploadFichier.php">uploader un fichier</a></li>
                <li><a href="interaction.html">interaction pc</a></li>

            </ul>
        </div>

        <div data-role="footer" data-position="fixed">
            <h4>&copy; projet IHM</h4>
        </div>

    </div>
        

    </div>
    <div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page">
        <div data-role="header">
            <h1>First Gallery</h1>
        </div>

        <div data-role="content">

            <ul class="gallery">
                <li><a href="images/big/wallpaper-1130016.jpg" rel="external">
                    <img src="images/wallpaper-1130016.jpg" alt="Image 001" /></a></li>
                <li><a href="images/big/wallpaper-1190539.jpg" rel="external">
                    <img src="images/wallpaper-1190539.jpg" /></a></li>
                <li><a href="images/big/wallpaper-1190540.jpg" rel="external">
                    <img src="images/wallpaper-1190540.jpg" /></a></li>
                <li><a href="images/big/wallpaper-1392202.jpg" rel="external">
                    <img src="images/wallpaper-1392202.jpg" /></a></li>
                <li><a href="images/big/wallpaper-2315894.png" rel="external">
                    <img src="images/wallpaper-2315894.png" /></a></li>
                <li><a href="images/big/wallpaper-2315655.jpg" rel="external">
                    <img src="images/wallpaper-2315655.jpg" /></a></li>
            </ul>

        </div>

        <div data-role="footer" data-position="fixed">
            <h4>&copy; IHM project</h4>
        </div>

    </div>

    <div data-role="page" data-add-back-btn="true" id="Gallery2" class="gallery-page">
        <div data-role="header">
            <h1>First Gallery</h1>
        </div>

        <div data-role="content">

            <ul class="gallery">
                <li><a href="images/big/wallpaper-1190539.jpg" rel="external">
                    <img src="images/wallpaper-1190539.jpg" /></a></li>
                <li><a href="images/big/wallpaper-2320504.jpg" rel="external">
                    <img src="images/wallpaper-2320504.jpg" /></a></li>
                <li><a href="images/big/wallpaper-1192267.jpg" rel="external">
                    <img src="images/wallpaper-1192267.jpg" /></a></li>
                <li><a href="images/big/wallpaper-1192284.jpg" rel="external">
                    <img src="images/wallpaper-1192284.jpg" /></a></li>
                <li><a href="images/big/wallpaper-1130016.jpg" rel="external">
                    <img src="images/wallpaper-1130016.jpg" /></a></li>
            </ul>

        </div>

        <div data-role="footer" data-position="fixed">
            <h4>&copy; IHM project</h4>
        </div>

    </div>
    <script src="scripts/jquery-1.8.3.min.js"></script>
    <script src="scripts/jquery.mobile-1.2.0.js"></script>
    <!--<script src="scripts/jquery.mobile-1.2.0.min.js"></script>-->
    <script src="scripts/klass.min.js"></script>
    <script src="scripts/code.photoswipe.jquery-3.0.5.js"></script>
    <!--<script src="scripts/code.photoswipe.jquery-3.0.5.min.js"></script>-->
    <script type="text/javascript">


        (function (window, $, PhotoSwipe) {

            $(document).ready(function () {

                $('div.gallery-page')
					.live('pageshow', function (e) {

					    var currentPage = $(e.target),
							options = {
							    getToolbar: PhotoSwipe.Toolbar.getToolbar
							},
							photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

					    return true;

					})

					.live('pagehide', function (e) {

					    var
							currentPage = $(e.target),
							photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

					    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
					        PhotoSwipe.detatch(photoSwipeInstance);
					    }

					    return true;

					});

            });

        }(window, window.jQuery, window.Code.PhotoSwipe));

    </script>
</body>
</html>
